<template>
  <div class="relative w-full h-full">
    <div class="border-bottom mb12">
      <PageHeader :title="$t('store_coupon.detail.优惠券详情')">
        <template #right>
          <el-button type="primary" @click="goBack" size="small">
            <SvgIcon name="iconfanhui" color="#fff" class="mr4"></SvgIcon
            >{{ $t('store_coupon.detail.返回上级页面') }}</el-button
          >
        </template>
      </PageHeader>
    </div>
    <div class="titleRow pl10">{{ $t('store_coupon.detail.优惠券基本信息') }}</div>
    <div class="flex_aic mt15" v-for="item in info" :key="item.name">
      <div class="label">{{ item.name }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
    <div class="titleRow pl10 mt15">{{ $t('store_coupon.detail.领取和使用规则') }}</div>
    <div class="flex_aic mt15">
      <div class="label">{{ $t('store_coupon.detail.每人限领次数') }}</div>
      <div class="value">{{ $t('store_coupon.detail.每位会员限制领取11次') }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const router = useRouter();
const { t } = useI18n();

const info = computed(() => [
    {
        name: t('store_coupon.detail.优惠券所属类型'),
        value: t('store_coupon.detail.满减券'),
    },
    {
        name: t('store_coupon.index.店铺名称'),
        value: t('store_coupon.detail.测试店铺'),
    },
    {
        name: t('store_coupon.index.优惠券名称'),
        value: t('store_coupon.detail.测试'),
    },
    {
        name: t('store_coupon.add.发放总量'),
        value: t('store_coupon.detail.11'),
    },
    {
        name: t('store_coupon.add.适用商品'),
        value: t('store_coupon.add.全部商品可用'),
    },
    {
        name: t('store_coupon.detail.使用时间'),
        value: t('store_coupon.detail.2025年3月20日18点36分至2025年3月30日22点'),
    },
    {
        name: t('store_coupon.index.获取方式'),
        value: t('store_coupon.detail.免费领取'),
    },
    {
        name: t('store_coupon.detail.使用门槛'),
        value: t('store_coupon.detail.订单满111元时可以使用此优惠券'),
    },
    {
        name: t('store_coupon.detail.优惠券内容'),
        value: t('store_coupon.detail.满足使用门槛后可以减免11元'),
    },
]);

const goBack = () => {
    router.back();
};
</script>

<style lang="scss" scoped>
.border-bottom {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
}
.titleRow {
  width: 100%;
  height: 36px;
  border-radius: 2px;
  background: #fffaf7;
  line-height: 36px;
}

.label {
  width: 200px;
  height: 32px;
  padding-right: 20px;
  font-size: 13px;
  line-height: 32px;
  text-align: right;
  &:before {
    content: "*";
    color: #ff4d4f;
  }
}
</style>
